<template>
  <div id="pictureManagePage">
    <a-flex justify="space-between">
      <h2>图片管理</h2>
      <a-space>
        <a-button type="primary" @click="openAddPictureModal">+ 创建图片</a-button>
        <a-button type="primary" @click="openBatchModal" ghost>+ 批量创建图片</a-button>
      </a-space>
    </a-flex>
    <div style="margin-bottom: 16px" />
    <!-- 搜索表单 -->
    <a-form layout="inline" :model="searchParams" @finish="doSearch">
      <a-form-item label="关键词">
        <a-input
          v-model:value="searchParams.searchText"
          placeholder="从名称和简介搜索"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="类型">
        <a-input v-model:value="searchParams.category" placeholder="请输入类型" allow-clear />
      </a-form-item>
      <a-form-item label="标签">
        <a-select
          v-model:value="searchParams.tags"
          mode="tags"
          placeholder="请输入标签"
          style="min-width: 180px"
          allow-clear
        />
      </a-form-item>
      <a-form-item name="reviewStatus" label="审核状态">
        <a-select
          v-model:value="searchParams.reviewStatus"
          style="min-width: 180px"
          placeholder="请选择审核状态"
          :options="PIC_REVIEW_STATUS_OPTIONS"
          allow-clear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
    <div style="margin-bottom: 16px" />
    <!-- 图片管理卡片列表 -->
    <div class="picture-management-list">
      <div 
        v-for="record in dataList" 
        :key="record.id" 
        class="picture-card"
      >
        <!-- 图片预览区域 -->
        <div class="picture-preview">
          <a-image 
            :src="record.url" 
            class="preview-image"
            :preview="{ mask: '预览' }"
          />
          <div class="picture-overlay">
            <div class="picture-id">ID: {{ record.id }}</div>
            <div class="picture-size">{{ (record.picSize / 1024).toFixed(2) }}KB</div>
          </div>
        </div>
        
        <!-- 图片信息区域 - 重新设计为紧凑布局 -->
        <div class="picture-info">
          <!-- 标题行 -->
          <div class="title-row">
            <h3 class="picture-title" :title="record.name">{{ record.name }}</h3>
            <span class="picture-format">{{ record.picFormat }}</span>
          </div>
          
          <!-- 紧凑信息网格 -->
          <div class="info-grid">
            <!-- 第一行：分类、审核状态、尺寸 -->
            <div class="grid-row">
              <div class="grid-item">
                <span class="label">分类</span>
                <a-tag color="blue" size="small">{{ record.category || '默认' }}</a-tag>
              </div>
              <div class="grid-item">
                <span class="label">状态</span>
                <a-tag :color="PIC_REVIEW_STATUS_MAP[record.reviewStatus]?.color" size="small">
                  {{ PIC_REVIEW_STATUS_MAP[record.reviewStatus]?.text }}
                </a-tag>
              </div>
              <div class="grid-item">
                <span class="label">尺寸</span>
                <span class="value">{{ record.picWidth }}×{{ record.picHeight }}</span>
              </div>
            </div>
            
            <!-- 第二行：比例、用户ID、空间ID -->
            <div class="grid-row">
              <div class="grid-item">
                <span class="label">比例</span>
                <span class="value">{{ record.picScale }}</span>
              </div>
              <div class="grid-item">
                <span class="label">用户ID</span>
                <span class="value">{{ record.userId }}</span>
              </div>
              <div class="grid-item">
                <span class="label">空间</span>
                <span class="value">{{ record.spaceId }}</span>
              </div>
            </div>
            
            <!-- 第三行：标签（如果有） -->
            <div class="grid-row" v-if="record.tags && JSON.parse(record.tags || '[]').length > 0">
              <div class="grid-item full-width">
                <span class="label">标签</span>
                <div class="tags-compact">
                  <a-tag 
                    v-for="tag in JSON.parse(record.tags || '[]').slice(0, 3)" 
                    :key="tag" 
                    color="green" 
                    size="small"
                  >
                    {{ tag }}
                  </a-tag>
                  <span v-if="JSON.parse(record.tags || '[]').length > 3" class="more-tags">
                    +{{ JSON.parse(record.tags || '[]').length - 3 }}
                  </span>
                </div>
              </div>
            </div>
            
            <!-- 第四行：时间和审核信息 -->
            <div class="grid-row">
              <div class="grid-item">
                <span class="label">创建</span>
                <span class="value time">{{ dayjs(record.createTime).format('MM-DD HH:mm') }}</span>
              </div>
              <div class="grid-item">
                <span class="label">编辑</span>
                <span class="value time">{{ dayjs(record.editTime).format('MM-DD HH:mm') }}</span>
              </div>
              <div class="grid-item" v-if="record.reviewMessage">
                <span class="label">说明</span>
                <span 
                  class="value review" 
                  :title="record.reviewMessage"
                  @click="showReviewDetail(record.reviewMessage)"
                >
                  {{ getReviewSummary(record.reviewMessage) }}
                  <span v-if="record.reviewMessage && record.reviewMessage.length > 8" class="expand-icon">...</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮区域 -->
        <div class="picture-actions">
          <a-space>
            <a-button
              v-if="record.reviewStatus !== PIC_REVIEW_STATUS_ENUM.PASS"
              type="primary"
              size="small"
              @click="handleReview(record, PIC_REVIEW_STATUS_ENUM.PASS)"
            >
              通过
            </a-button>
            <a-button
              v-if="record.reviewStatus !== PIC_REVIEW_STATUS_ENUM.REJECT"
              danger
              size="small"
              @click="handleReview(record, PIC_REVIEW_STATUS_ENUM.REJECT)"
            >
              拒绝
            </a-button>
            <a-button 
              type="default" 
              size="small"
              :href="`/add_picture?id=${record.id}`" 
              target="_blank"
            >
              编辑
            </a-button>
            <a-button 
              danger 
              size="small"
              @click="doDelete(record.id)"
            >
              删除
            </a-button>
          </a-space>
        </div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-container">
      <a-pagination
        v-model:current="searchParams.current"
        v-model:pageSize="searchParams.pageSize"
        :total="total"
        :show-size-changer="true"
        :show-quick-jumper="true"
        :show-total="(total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`"
        @change="onPageChange"
      />
    </div>
    
    <!-- 创建图片弹窗 -->
    <AddPictureModal 
      ref="addPictureModalRef"
      :open="addPictureModalVisible"
      :onSuccess="onAddPictureSuccess"
      :onCancel="onAddPictureCancel"
    />
    
    <!-- 批量创建图片弹窗 -->
    <AddPictureBatchModal 
      ref="batchModalRef"
      :open="batchModalVisible"
      :onSuccess="onBatchSuccess"
      :onCancel="onBatchCancel"
    />
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import {
  deletePictureUsingPost,
  doPictureReviewUsingPost,
  listPictureByPageUsingPost,
} from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import {
  PIC_REVIEW_STATUS_ENUM,
  PIC_REVIEW_STATUS_MAP,
  PIC_REVIEW_STATUS_OPTIONS,
} from '../../constants/picture.ts'
import dayjs from 'dayjs'
import AddPictureModal from '@/components/AddPictureModal.vue'
import AddPictureBatchModal from '@/components/AddPictureBatchModal.vue'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
    ellipsis: true,
  },
  {
    title: '图片',
    dataIndex: 'url',
    width: 120,
  },
  {
    title: '名称',
    dataIndex: 'name',
    width: 150,
    ellipsis: true,
  },
  {
    title: '简介',
    dataIndex: 'introduction',
    width: 200,
    ellipsis: true,
  },
  {
    title: '类型',
    dataIndex: 'category',
    width: 80,
    ellipsis: true,
  },
  {
    title: '标签',
    dataIndex: 'tags',
    width: 120,
    ellipsis: true,
  },
  {
    title: '图片信息',
    dataIndex: 'picInfo',
    width: 150,
    ellipsis: true,
  },
  {
    title: '用户ID',
    dataIndex: 'userId',
    width: 80,
    ellipsis: true,
  },
  {
    title: '空间ID',
    dataIndex: 'spaceId',
    width: 80,
    ellipsis: true,
  },
  {
    title: '审核信息',
    dataIndex: 'reviewMessage',
    width: 150,
    ellipsis: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 120,
    ellipsis: true,
  },
  {
    title: '编辑时间',
    dataIndex: 'editTime',
    width: 120,
    ellipsis: true,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right',
  },
]

// 定义数据
const dataList = ref<API.Picture[]>([])
const total = ref(0)

// 搜索条件
const searchParams = reactive<API.PictureQueryRequest>({
  current: 1,
  pageSize: 10,
  sortField: 'createTime',
  sortOrder: 'descend',
})

// 获取数据
const fetchData = async () => {
  const res = await listPictureByPageUsingPost({
    ...searchParams,
    nullSpaceId: true,
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
}

// 页面加载时获取数据，请求一次
onMounted(() => {
  fetchData()
})

// 分页变化处理
const onPageChange = (page: number, pageSize: number) => {
  searchParams.current = page
  searchParams.pageSize = pageSize
  fetchData()
}

// 搜索数据
const doSearch = () => {
  // 重置页码
  searchParams.current = 1
  fetchData()
}

// 删除数据
const doDelete = async (id: string) => {
  if (!id) {
    return
  }
  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    // 刷新数据
    fetchData()
  } else {
    message.error('删除失败')
  }
}

// 获取审核说明摘要
const getReviewSummary = (reviewMessage: string) => {
  if (!reviewMessage) return ''
  // 如果长度小于等于8个字符，直接显示
  if (reviewMessage.length <= 8) {
    return reviewMessage
  }
  // 否则显示前8个字符
  return reviewMessage.substring(0, 8)
}

// 显示审核详情
const showReviewDetail = (reviewMessage: string) => {
  if (reviewMessage && reviewMessage.length > 8) {
    // 可以用 Modal 或者 Tooltip 显示完整内容
    message.info(reviewMessage)
  }
}

// 审核图片
const handleReview = async (record: API.Picture, reviewStatus: number) => {
  const reviewMessage =
    reviewStatus === PIC_REVIEW_STATUS_ENUM.PASS ? '管理员操作通过' : '管理员操作拒绝'
  const res = await doPictureReviewUsingPost({
    id: record.id,
    reviewStatus,
    reviewMessage,
  })
  if (res.data.code === 0) {
    message.success('审核操作成功')
    // 重新获取列表数据
    fetchData()
  } else {
    message.error('审核操作失败，' + res.data.message)
  }
}

// ========== 弹窗相关逻辑 ==========

// 创建图片弹窗
const addPictureModalRef = ref()
const addPictureModalVisible = ref(false)

const openAddPictureModal = () => {
  addPictureModalVisible.value = true
}

const onAddPictureSuccess = () => {
  // 刷新列表
  fetchData()
}

const onAddPictureCancel = () => {
  addPictureModalVisible.value = false
}

// 批量创建图片弹窗
const batchModalRef = ref()
const batchModalVisible = ref(false)

const openBatchModal = () => {
  batchModalVisible.value = true
}

const onBatchSuccess = () => {
  // 刷新列表
  fetchData()
}

const onBatchCancel = () => {
  batchModalVisible.value = false
}
</script>

<style scoped>
#pictureManagePage {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 1rem;
}

/* 页面标题样式 */
#pictureManagePage h2 {
  color: var(--text-primary);
  font-weight: 600;
}

/* 黑色模式下的页面样式 */
[data-theme="dark"] #pictureManagePage {
  background: rgba(31, 41, 55, 0.9);
  border: 1px solid rgba(75, 85, 99, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #pictureManagePage h2 {
  color: #e5e7eb;
}

/* 黑色模式下的表单标签 */
[data-theme="dark"] #pictureManagePage :deep(.ant-form-item-label > label) {
  color: #e5e7eb !important;
}

/* 黑色模式下的输入框 */
[data-theme="dark"] #pictureManagePage :deep(.ant-input),
[data-theme="dark"] #pictureManagePage :deep(.ant-select-selector) {
  background: rgba(55, 65, 81, 0.8) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
  color: #e5e7eb !important;
}

/* 黑色模式下的输入框悬停状态 */
[data-theme="dark"] #pictureManagePage :deep(.ant-input:hover),
[data-theme="dark"] #pictureManagePage :deep(.ant-select:hover .ant-select-selector) {
  border-color: rgba(14, 165, 233, 0.6) !important;
}

/* 黑色模式下的输入框聚焦状态 */
[data-theme="dark"] #pictureManagePage :deep(.ant-input:focus),
[data-theme="dark"] #pictureManagePage :deep(.ant-input-focused),
[data-theme="dark"] #pictureManagePage :deep(.ant-select-focused .ant-select-selector) {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important;
}

/* 黑色模式下的占位符文字 */
[data-theme="dark"] #pictureManagePage :deep(.ant-input::placeholder),
[data-theme="dark"] #pictureManagePage :deep(.ant-select-selection-placeholder) {
  color: #9ca3af !important;
}

/* 黑色模式下的选择项 */
[data-theme="dark"] #pictureManagePage :deep(.ant-select-selection-item) {
  color: #e5e7eb !important;
  background: rgba(14, 165, 233, 0.2) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}

/* 黑色模式下的表格 */
[data-theme="dark"] #pictureManagePage :deep(.ant-table) {
  background: rgba(31, 41, 55, 0.8) !important;
  color: #e5e7eb;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-table-thead > tr > th) {
  background: rgba(17, 24, 39, 0.8) !important;
  color: #f3f4f6 !important;
  border-color: rgba(75, 85, 99, 0.3) !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-table-tbody > tr > td) {
  background: rgba(31, 41, 55, 0.6) !important;
  color: #e5e7eb !important;
  border-color: rgba(75, 85, 99, 0.3) !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(55, 65, 81, 0.8) !important;
}

/* 黑色模式下的分页组件 */
[data-theme="dark"] #pictureManagePage :deep(.ant-pagination) {
  color: #e5e7eb;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-item) {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(75, 85, 99, 0.5);
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-item a) {
  color: #e5e7eb;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-item:hover) {
  border-color: rgba(14, 165, 233, 0.6);
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-item-active) {
  background: rgba(14, 165, 233, 0.2);
  border-color: #0ea5e9;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-item-active a) {
  color: #0ea5e9;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-prev),
[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-next) {
  color: #e5e7eb;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-prev:hover),
[data-theme="dark"] #pictureManagePage :deep(.ant-pagination .ant-pagination-next:hover) {
  color: #0ea5e9;
}

/* 黑色模式下的按钮 */
[data-theme="dark"] #pictureManagePage :deep(.ant-btn:not(.ant-btn-primary)) {
  background: rgba(55, 65, 81, 0.8) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-btn:not(.ant-btn-primary):hover) {
  background: rgba(75, 85, 99, 0.8) !important;
  border-color: rgba(14, 165, 233, 0.6) !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-btn-dangerous) {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-btn-dangerous:hover) {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  color: #f87171 !important;
}

/* 黑色模式下的标签 */
[data-theme="dark"] #pictureManagePage :deep(.ant-tag) {
  background: rgba(55, 65, 81, 0.8) !important;
  color: #e5e7eb !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-tag-green) {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-tag-blue) {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-tag-orange) {
  background: rgba(249, 115, 22, 0.2) !important;
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-tag-red) {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* 表格行高和图片显示优化 */
#pictureManagePage :deep(.ant-table-tbody > tr > td) {
  vertical-align: top !important;
  padding: 12px 8px !important;
}

#pictureManagePage :deep(.ant-table-tbody > tr) {
  height: auto !important;
}

/* 图片列样式 */
#pictureManagePage :deep(.ant-table-tbody > tr > td:nth-child(2)) {
  padding: 8px !important;
  text-align: center;
}

#pictureManagePage :deep(.ant-image) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] #pictureManagePage :deep(.ant-image) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 文字内容样式优化 */
#pictureManagePage :deep(.ant-table-tbody > tr > td) {
  word-break: break-word;
  white-space: normal;
  line-height: 1.5;
}

/* 操作列样式 */
#pictureManagePage :deep(.ant-table-tbody > tr > td:last-child) {
  white-space: nowrap;
}

/* 表格滚动条样式 */
#pictureManagePage :deep(.ant-table-body) {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

#pictureManagePage :deep(.ant-table-body::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

#pictureManagePage :deep(.ant-table-body::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

#pictureManagePage :deep(.ant-table-body::-webkit-scrollbar-thumb) {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

[data-theme="dark"] #pictureManagePage :deep(.ant-table-body::-webkit-scrollbar-track) {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #pictureManagePage :deep(.ant-table-body::-webkit-scrollbar-thumb) {
  background: rgba(255, 255, 255, 0.3);
}

/* 卡片式布局样式 */
.picture-management-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.picture-card {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-height: 180px;
}

.picture-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* 黑色模式下的卡片 */
[data-theme="dark"] .picture-card {
  background: rgba(31, 41, 55, 0.95);
  border: 1px solid rgba(75, 85, 99, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .picture-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* 图片预览区域 */
.picture-preview {
  position: relative;
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .picture-preview {
  background: rgba(0, 0, 0, 0.2);
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.preview-image :deep(.ant-image) {
  width: 100% !important;
  height: 100% !important;
}

.preview-image :deep(.ant-image img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.picture-card:hover .preview-image {
  transform: scale(1.05);
}

.picture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  padding: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

.picture-id {
  font-weight: 600;
}

.picture-size {
  opacity: 0.9;
}

/* 图片信息区域 - 全新紧凑设计 */
.picture-info {
  flex: 1;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.info-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 0.5rem;
}

[data-theme="dark"] .info-section {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.picture-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

[data-theme="dark"] .picture-title {
  color: #e5e7eb;
}

.picture-intro {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .picture-intro {
  color: #9ca3af;
}

/* 详细信息 */
.info-details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.info-row {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.info-item.full-width {
  flex: 1 1 100%;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .info-label {
  color: #9ca3af;
}

.info-value {
  font-size: 0.875rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .info-value {
  color: #d1d5db;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  overflow: hidden;
  max-height: 2rem;
}

/* 标题行 */
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .title-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.picture-format {
  font-size: 0.7rem;
  color: #6b7280;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  font-weight: 500;
}

[data-theme="dark"] .picture-format {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.1);
}

/* 信息网格 */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.15rem;
  align-items: center;
}

.grid-item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.1rem 0;
}

.grid-item.full-width {
  grid-column: 1 / -1;
}

.grid-item .label {
  font-size: 0.7rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 2rem;
}

[data-theme="dark"] .grid-item .label {
  color: #9ca3af;
}

.grid-item .value {
  font-size: 0.75rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

[data-theme="dark"] .grid-item .value {
  color: #d1d5db;
}

.grid-item .value.time {
  font-size: 0.7rem;
  color: #6b7280;
}

[data-theme="dark"] .grid-item .value.time {
  color: #9ca3af;
}

.grid-item .value.review {
  font-size: 0.7rem;
  color: #f59e0b;
  max-width: 4rem;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 3px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 2px;
}

.grid-item .value.review:hover {
  background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .grid-item .value.review {
  color: #fbbf24;
}

[data-theme="dark"] .grid-item .value.review:hover {
  background: rgba(251, 191, 36, 0.1);
}

.expand-icon {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* 紧凑标签容器 */
.tags-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  align-items: center;
  overflow: hidden;
}

.tags-compact .ant-tag {
  margin: 0 !important;
  font-size: 0.65rem !important;
  padding: 1px 4px !important;
  line-height: 1.2 !important;
}

.more-tags {
  font-size: 0.65rem;
  color: #6b7280;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 4px;
  border-radius: 4px;
}

[data-theme="dark"] .more-tags {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.1);
}

/* 操作按钮区域 */
.picture-actions {
  display: flex;
  align-items: flex-end;
  padding: 1rem 1rem 1rem 0.5rem;
}

.picture-actions .ant-space {
  flex-direction: column;
  gap: 0.5rem !important;
}

.picture-actions .ant-btn {
  width: 80px;
  font-size: 0.8rem;
  padding: 6px 12px;
  height: 32px;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .pagination-container {
  background: rgba(31, 41, 55, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .picture-management-list {
    grid-template-columns: repeat(auto-fill, minmax(650px, 1fr));
  }
}

@media (max-width: 768px) {
  .picture-management-list {
    grid-template-columns: 1fr;
  }
  
  .picture-card {
    flex-direction: column;
    min-height: auto;
  }
  
  .picture-preview {
    width: 100%;
    height: 180px;
  }
  
  .info-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .picture-actions {
    padding: 1rem;
  }
  
  .picture-actions .ant-space {
    flex-direction: row;
    width: 100%;
  }
  
  .picture-actions .ant-btn {
    width: auto;
    flex: 1;
  }
}
</style>
